
<template>
  <div id="game-container"></div>
</template>

<script>
import Phaser from 'phaser'

// 定义独立场景类
class MainScene extends Phaser.Scene {
  constructor() {
    super('MainScene')
  }

  preload() {
    this.load.image('player', '/src/assets/game/images/player.png')
    this.load.image('bullet', '/src/assets/game/images/bullet.png')
    this.load.image('weapon1', '/src/assets/game/images/weapon_level1.png')
    this.load.image('weapon2', '/src/assets/game/images/weapon_level2.png')
    this.load.image('weapon3', '/src/assets/game/images/weapon_level3.png')
  }

  create() {
    // 初始化武器等级
    this.weaponLevel = 1
    
    // 创建敌机图形
    const graphics = this.make.graphics()
    graphics.fillStyle(0xff0000, 1)
    graphics.fillTriangle(0, 20, 10, 0, 20, 20)
    graphics.generateTexture('enemy-texture', 20, 20)
    graphics.destroy()

    // 添加玩家飞机
    this.player = this.physics.add.sprite(400, 500, 'player')
    this.player.setCollideWorldBounds(true)
    
    // 添加键盘控制
    this.cursors = this.input.keyboard.createCursorKeys()
    
    // 添加子弹组
    this.bullets = this.physics.add.group()
    
    // 添加敌机组
    this.enemies = this.physics.add.group()
    this.time.addEvent({
      delay: 1000,
      callback: () => {
        const x = Phaser.Math.Between(50, 750)
        const enemy = this.enemies.create(x, 0, 'enemy-texture')
        enemy.setScale(1.5)
        enemy.setVelocity(0, 100)
      },
      loop: true
    })
    
    // 碰撞检测
    this.physics.add.collider(this.bullets, this.enemies, (bullet, enemy) => {
      bullet.destroy()
      enemy.destroy()
      this.score += 10
      this.scoreText.setText('分数: ' + this.score)
      
      // 10%几率掉落道具
      if (Phaser.Math.Between(1, 10) === 1) {
        this.createPowerUp(enemy.x, enemy.y)
      }
    })
    
    // 道具组
    this.powerups = this.physics.add.group()
    
    // 分数显示
    this.score = 0
    this.scoreText = this.add.text(16, 16, '分数: 0', { fontSize: '32px', fill: '#fff' })
  }

  createPowerUp(x, y) {
    try {
      if (!this.powerups) {
        console.warn('Powerups group not initialized')
        return
      }
      
      // 随机生成不同类型的道具
      const powerupType = Phaser.Math.Between(1, 3)
      let powerup, texture, type
      
      if (powerupType === 1) {
        texture = 'weapon1'
        type = 'weapon-upgrade-1'
      } else if (powerupType === 2) {
        texture = 'weapon2'
        type = 'weapon-upgrade-2'
      } else {
        texture = 'weapon3'
        type = 'weapon-upgrade-3'
      }
      
      powerup = this.powerups.create(x, y, texture)
      if (!powerup) {
        console.warn('Failed to create powerup')
        return
      }
      
      powerup.setVelocityY(100)
      powerup.setData('type', type)
      powerup.setCollideWorldBounds(true)
      
      // 添加道具碰撞检测
      this.physics.add.overlap(this.player, this.powerups, (player, powerup) => {
        const type = powerup.getData('type')
        if (type.startsWith('weapon-upgrade')) {
          this.weaponLevel = parseInt(type.split('-')[2])
        }
        powerup.destroy()
      })
    } catch (error) {
      console.error('Error creating powerup:', error)
    }
  }

  update() {
    // 玩家移动控制
    if (this.cursors.left.isDown) {
      this.player.setVelocityX(-200)
    } else if (this.cursors.right.isDown) {
      this.player.setVelocityX(200)
    } else {
      this.player.setVelocityX(0)
    }
    
    // 根据武器等级发射子弹
    if (this.input.keyboard.checkDown(this.cursors.space, 300)) {
      if (this.weaponLevel === 1) {
        // 一级武器：双发45度散射
        const bullet1 = this.bullets.create(this.player.x - 15, this.player.y - 20, 'bullet')
        bullet1.setVelocity(-100, -300)
        
        const bullet2 = this.bullets.create(this.player.x + 15, this.player.y - 20, 'bullet')
        bullet2.setVelocity(100, -300)
      } else if (this.weaponLevel === 2) {
        // 二级武器：三发子弹
        const bullet1 = this.bullets.create(this.player.x - 20, this.player.y - 20, 'bullet')
        bullet1.setVelocity(-150, -300)
        
        const bullet2 = this.bullets.create(this.player.x, this.player.y - 20, 'bullet')
        bullet2.setVelocity(0, -350)
        
        const bullet3 = this.bullets.create(this.player.x + 20, this.player.y - 20, 'bullet')
        bullet3.setVelocity(150, -300)
      } else {
        // 三级武器：五发子弹扇形散射
        for (let i = 0; i < 5; i++) {
          const bullet = this.bullets.create(this.player.x, this.player.y - 20, 'bullet')
          const angle = Phaser.Math.Between(-30, 30)
          const velocityX = Math.sin(Phaser.Math.DegToRad(angle)) * 200
          bullet.setVelocity(velocityX, -400)
        }
      }
    }
  }
}

export default {
  name: 'GameScene',
  mounted() {
    const config = {
      type: Phaser.AUTO,
      width: 800,
      height: 600,
      parent: 'game-container',
      physics: {
        default: 'arcade',
        arcade: {
          gravity: { y: 0 },
          debug: false
        }
      },
      scene: [MainScene]
    }

    this.game = new Phaser.Game(config)
  },
  beforeDestroy() {
    if (this.game) {
      this.game.destroy(true)
    }
  }
}
</script>

<style scoped>
#game-container {
  width: 800px;
  height: 600px;
  margin: 0 auto;
}
</style>
